<template>
  <div id="singer" class="page" style="margin-top:20px; ">
    <div class="content">
        <div style="width:250px;" >
          <el-menu default-active="1" class="el-menu-vertical" style="width:100%;" @select="getSinger" :default-openeds="opens">
            <i class="el-icon-s-promotion"></i>
            <span style="margin-left:10px;">歌手列表</span>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>歌手类型</span>
              </template>
              <el-menu-item v-for="(item,index) in type" :key="index" :index="'1-' + index">
                <i class="el-icon-s-custom"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-position"></i>
                <span>地区</span>
              </template>
              <el-menu-item v-for="(item,index) in area" :key="index" :index="'2-' + index">
                <i class="el-icon-coordinate"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="content singer">
            <div class="item" v-for="(element,index) in singerList" :key="index">
              <a href="/singerDetails" @click="toDetails(element)">
                <div style="width:150px;height:150px;border:1px solid lightgray;border-radius: 10px;">
                  <img :src="element.img1v1Url" :title="element.alias[0]" width="100%;">
                </div>
                <p class="desc">{{element.name}}</p>
              </a>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import StorageUtil from "../../utils/StorageUtil";

export default {
  name: "singer",
  data(){
    return{
        type:[
          {type:-1,name:'全部'},
          {type:1,name:'男歌手'},
          {type:2,name:'女歌手'},
          {type:3,name:'乐队'},
        ],
        area:[
          {type:-1,name:'全部'},
          {type:7,name:'华语'},
          {type:96,name:'欧美'},
          {type:8,name:'日本'},
          {type:16,name:'韩国'},
          {type:0,name:'其他'}
        ],
        t:-1,
        a:-1,
        singerList:[],
        opens:['1','2'],
    }
  },
  methods:{
      getSinger(item){
         if(item !=  null){
            let array = item.split("-");
            if(array[0] == 1){
               this.t = this.type[array[1]].type;
            }else{
              this.a = this.area[array[1]].type;
            }
         }
         this.$get("https://autumnfish.cn/artist/list?type=" + this.t + "&area=" + this.a).then(result => {
            this.singerList = result.artists;
         })
      },
      toDetails(item){
          let singer = {
              id:item.id,
              name:item.name,
              image:item.img1v1Url
          }
          StorageUtil.session.setItem("singer",singer);
      },
  },
  created() {
      this.getSinger(null);
  }
}
</script>

<style scoped>
  #singer .singer{
    flex-wrap: wrap;
    width:750px;
    margin-left:20px;
  }
  #singer .item{
    margin:10px;
    width:150px;
  }
</style>
